import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import OriginalExample from '../../../examples/enable-row-numbers-original';
import StaticExample from '../../../examples/enable-row-numbers-static';

<Head>
  <title>Row Numbers Guide - Material React Table V3 Docs</title>
  <meta
    name="description"
    content="How to use and customize automatic row numbers in Material React Table"
  />
</Head>

## Row Numbers Feature Guide

Material React Table has an easy to implement row number features. There are two row number modes that you can enable. You can have row numbers that are associated with the data in the table ([original mode](<#enable-row-numbers-(original-mode)>)), or you can have row numbers that are just statically part of the table ([static mode](<#enable-row-numbers-(static-mode)>)).

### Relevant Table Options

<TableOptionsTable
  onlyOptions={new Set(['enableRowNumbers', 'rowNumberDisplayMode'])}
/>

### Enable Row Numbers (Static Mode)

In the default rowNumberDisplayMode (`static`), row numbers are just a static part of the table in their own column. They act like the row numbers in an excel spreadsheet. Sorting and filtering will not affect the row numbers.

<StaticExample />

### Enable Row Numbers (Original Mode)

Alternatively, use the `"original"` rowNumberDisplayMode to have row numbers linked to the original index of the data array. This means that when you search or filter, the same row numbers will stay with the same rows as data is sorted and filtered.

<OriginalExample />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-number-examples)**
